<template>
  <el-tabs type="border-card" class="order-container">
    <el-tab-pane label="订单管理">
      <!-- 头部 -->
      <el-input
        v-model="orderList.id"
        style="width: 20%; margin-right: 20px; margin-bottom: 20px"
        placeholder="订单ID"
      ></el-input>
      <el-select
        v-model="orderList.status"
        clearable
        placeholder="订单状态"
        style="width: 20%; margin-right: 20px; margin-bottom: 20px"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="conditionGetOrderList"
        >查询</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-brush"
        @click="clearCondition"
      ></el-button>
      <!-- /头部 -->
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#EDF4FF', color: '#606266' }"
      >
        <el-table-column prop="id" label="订单号" width="180">
        </el-table-column>
        <el-table-column prop="totalPrice" label="订单金额" width="180">
        </el-table-column>
        <el-table-column prop="goodsCount" label="商品数量" width="180">
        </el-table-column>
        <el-table-column
          prop="status "
          label="订单状态"
          width="180"
          :filters="[
            { text: '待付款', value: 1 },
            { text: '已取消', value: 2 },
            { text: '已付款', value: 3 },
            { text: '配送中', value: 4 },
            { text: '已完成', value: 5 },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="{ row }">
            <el-tag :type="statusType(row)" disable-transitions>{{
              statusText(row)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created" label="创建时间" width="235" sortable>
          <template slot-scope="{ row }">
            <i class="el-icon-timer"></i>
            <span style="margin-left: 10px">{{ row.created }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="small" @click="getOrderDetail(row.id)"
              >详情</el-button
            >
            <el-button
              v-if="row.status == 3"
              size="small"
              type="primary"
              @click="updateOrderStatus(row.id)"
              >配送</el-button
            >
            <el-button
              v-else-if="row.status == 2 || row.status == 5"
              size="small"
              type="danger"
              @click="deletOrder(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格 -->
      <!-- 分页 -->
      <el-row type="flex">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="total"
          :page-size="orderList.pageSize"
          :current-page="orderList.pageNum"
          @current-change="changePage"
        >
        </el-pagination>
      </el-row>
      <!-- /分页 -->
      <!-- 订单详情弹层 -->
      <el-dialog
        title="订单详情"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form label-position="right" label-width="160px" :model="dialogdata">
          <el-form-item label="订单编号">{{ dialogdata.id }}</el-form-item>
          <el-form-item label="订单状态">
            <el-tag v-if="dialogdata.status === 4">配送中</el-tag>
            <el-tag type="success" v-else-if="dialogdata.status === 5"
              >已完成</el-tag
            >
            <el-tag type="info" v-else-if="dialogdata.status === 3"
              >已付款</el-tag
            >
            <el-tag type="info" v-else-if="dialogdata.status === 2"
              >已取消</el-tag
            >
            <el-tag type="info" v-else-if="dialogdata.status === 1"
              >待付款</el-tag
            >
          </el-form-item>
          <el-form-item label="支付金额">
            {{ dialogdata.totalPrice }}</el-form-item
          >
          <el-form-item label="商品列表">
            <!-- 商品列表 -->
            <el-table
              :data="dialogdata.goodsItem"
              style="width: 100%"
              :header-cell-style="{ background: '#EDF4FF', color: '#606266' }"
            >
              <el-table-column label="主图" width="200">
                <template slot-scope="{ row }">
                  <el-row>
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="row.imageUrl"
                    ></el-image>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="标题" width="120">
              </el-table-column>
              <el-table-column prop="count" label="数量" width="120">
              </el-table-column>
            </el-table>
            <!-- /商品列表 -->
          </el-form-item>
          <el-form-item label="收货人姓名"> {{ dialogdata.name }}</el-form-item>
          <el-form-item label="手机号">{{ dialogdata.mobile }} </el-form-item>
          <el-form-item label="收货地址"
            >{{ dialogdata.province }} {{ dialogdata.city }}
            {{ dialogdata.district }}
            {{ dialogdata.detailedAddress }}</el-form-item
          >
          <el-form-item label="创建时间">{{ dialogdata.created }}</el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- /订单详情弹层 -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {
  getOrderList,
  deletOrder,
  updateOrderStatus,
  getOrderDetail,
} from "@/api/order";
import store from "@/store";
export default {
  name: "",
  components: {},
  data() {
    return {
      // 弹层的显示
      dialogVisible: false,
      // 订单详情数据
      dialogdata: {},
      // 请求订单发送的数据
      orderList: {
        id: "",
        status: "",
        pageNum: 1,
        pageSize: 6,
        sid: store.getters.sid,
      },
      //记录总数
      total: 0,
      statusOptions: [
        {
          value: "1",
          label: "待付款",
        },
        {
          value: "2",
          label: "已取消",
        },
        {
          value: "3",
          label: "已付款",
        },
        {
          value: "4",
          label: "配送中",
        },
        {
          value: "5",
          label: "已完成",
        },
      ],
      //表格数据
      tableData: [],
    };
  },
  computed: {},
  created() {
    this.getOrderList();
  },
  methods: {
    //状态列的过滤
    filterTag(value, row) {
      return row.status === value;
    },
    // 订单状态颜色
    statusType(row) {
      if (row.status === 5) {
        return "success";
      } else if (row.status === 4) {
      } else if (row.status === 3) {
        return "info";
      } else if (row.status === 2) {
        return "info";
      } else if (row.status === 1) {
        return "info";
      }
    },
    //不同订单状态显示字
    statusText(row) {
      if (row.status === 5) {
        return "已完成";
      } else if (row.status === 4) {
        return "配送中";
      } else if (row.status === 3) {
        return "已付款";
      } else if (row.status === 2) {
        return "已取消";
      } else if (row.status === 1) {
        return "待付款";
      }
    },
    // 请求订单列表
    async getOrderList() {
      const { total, list } = await getOrderList(this.orderList);
      this.total = total;
      this.tableData = list;
      console.log(list);
    },
    // 条件查询
    conditionGetOrderList() {
      this.orderList.pageNum = 1;
      this.getOrderList();
    },
    // 清除刷新
    clearCondition() {
      this.orderList = {
        id: "",
        status: "",
        pageNum: 1,
        pageSize: 6,
        sid: store.getters.sid,
      };
      this.getOrderList();
    },
    // 获取订单详情
    async getOrderDetail(id) {
      const res = await getOrderDetail(id);
      console.log("获取到的订单详情", res);
      this.dialogVisible = true;
      this.dialogdata = res;
    },
    // 关闭弹层
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 删除订单
    async deletOrder(id) {
      try {
        // 删除前提示
        await this.$confirm("确定要删除吗?删除后数据不可恢复！！！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        // 删除
        await deletOrder(id);
        this.getOrderList(); //重新加载数据
        this.$message.success("删除角色成功");
      } catch (error) {
        console.log(error);
      }
    },
    // 更新订单状态
    async updateOrderStatus(id) {
      const updata = { id: id, status: 4 };
      await updateOrderStatus(updata);
      this.getOrderList(); //重新加载数据
      this.$message.success("配送成功");
    },
    // 分页
    changePage(newPage) {
      // newPage当前点击的页码
      // console.log(newPage);
      // 讲当前页码赋值给当前的最新页码
      this.orderList.pageNum = newPage;
      // 重新获取数据
      this.getOrderList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep #tab-0.is-active,
::v-deep #tab-1.is-active {
  background-color: #daeafd;
  border-radius: 20px;
}
::v-deep .el-form-item__label {
  font-weight: bolder;
}
</style>